<template>
	<view class="container">
		<text @click="back()" class="iconfont iconzuojiantou-copy backPostion" style="font-size: 45rpx;font-weight:bold;color: #7153FF;"></text>
		<view class="container-top" @click="chooseImageTap">
			<view class="userImg">
				<image v-if="user.avatarUrl !== '' " :src="user.avatarUrl"></image>
				<image v-else src="cloud://cloud1-6gvg8052f9670276.636c-cloud1-6gvg8052f9670276-1305457435/flowHouse/editImg.png"></image>
			</view>
			<view class="cameraImg">
				<image src="../../static/相机.png"></image>
			</view>
		</view>
		<view class="container-mid">
			<view class="editList">
				<view class="editListTop">
					<view class="editTitle">编 辑 信 息</view>
					<button>提交修改</button>
				</view>
				<view class="list">
					
					<view class="listItem"> 
						<view class="itemLeft">
							<text class="iconfont iconxing" style="font-size: 60rpx;color: #3C2B79;"></text>
							<view class="itemTitle">姓名</view>
						</view>
						<view class="itemRight">
							<view class="nameText">{{user.nickName}}</view>
							<text @click="inputName()" class="iconfont iconxie" style="font-size: 60rpx;color: #3C2B79;font-weight: bold;"></text>
						</view>
					</view>
					
					<view class="listItem">
						<view class="itemLeft">
							<text class="iconfont iconxing1" style="font-size: 60rpx;color: #3C2B79;"></text>
							<view class="itemTitle">性别</view>
						</view>
						<view class="sexSection">
							<view @click="changeSex(0)" :class="{'activeSex': user.sex === 0, 'man': true }">男</view>
							<view @click="changeSex(1)" :class="{'activeSex': user.sex === 1, 'woman': true  }">女</view>
						</view> 
					</view>
					
					<view class="listItem">
						<view class="itemLeft">
							<text class="iconfont iconxing" style="font-size: 60rpx;color: #3C2B79;"></text>
							<view class="itemTitle">生日</view>
						</view>
						<view class="dateSection">
							 <picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
								  <view class="uni-input">{{date}}</view>
							</picker> 
		<!-- 					<view class="dateYear">{{user.date[0]}}</view>
							<view class="dateMonth">{{user.date[1]}}</view>
							<view class="dateDay">{{user.date[2]}}</view> -->
						</view>
					</view>
					
					<view class="listItem">
						<view class="itemLeft">
							<text class="iconfont iconxing1" style="font-size: 60rpx;color: #3C2B79;"></text>
							<view class="itemTitle">地区</view>
						</view>
						<view class="itemRight">
							<picker @change="bindPickerChange" :value="index" :range="areaArray">
								<view class="addressText">{{areaArray[index]}}</view>
							</picker>
						</view>
					</view>
					
					<view class="introductionItem">
						<view class="introductionItemLeft">
							<text class="iconfont iconxing" style="font-size: 60rpx;color: #3C2B79;"></text>
							<view class="introductionItemTitle" style="margin-right: 350rpx;width: 400rpx;">个人简介</view>
							<text @click="inputIntro()" class="iconfont iconxie" style="font-size: 60rpx;color: #3C2B79;font-weight: bold;"></text>
						</view>
						<view class="itemRight" style="padding-bottom: 20rpx;">
							<view class="nameText">{{user.introduction}}</view>
						</view>
					</view>
					
				</view>
				<view class="MoreEditTitle">
					<text class="text1">更 多 编 辑 </text>
					<text class="text2">  ( 仅自己可见 )</text>
				</view>
				<view class="introductionItem">
					<view class="introductionItemLeft">
						<text class="iconfont iconxing" style="font-size: 60rpx;color: #3C2B79;"></text>
						<view class="introductionItemTitle" style="margin-right: 350rpx;width: 400rpx;">我的地址</view>
						<text @click="inputAddress()" class="iconfont iconxie" style="font-size: 60rpx;color: #3C2B79;font-weight: bold;"></text>
					</view>
					<view class="itemRight" style="padding-bottom: 20rpx;">
						<view class="nameText">{{user.perAddress}}</view>
					</view>
				</view>
				<!-- 
				<view class="listItem">
					<view class="itemLeft">
						<text class="iconfont iconxing" style="font-size: 60rpx;color: #3C2B79;"></text>
						<view class="itemTitle">个人简介</view>
					</view>
					<view class="itemRight">
						<view class="nameText">叫我芙儿</view>
						<text class="iconfont iconxie" style="font-size: 60rpx;color: #3C2B79;font-weight: bold;"></text>
					</view>
				</view> -->
			</view>
		</view>
		<view :hidden="userFeedbackHidden" class="popup_content">
					<view class="popup_title">您的{{inputTitle}}</view>
					<view class="popup_textarea_item">
						<textarea class="popup_textarea" :placeholder='inputTip' v-model="inputValue">
						</textarea>
						<view @click="submitFeedback()">
							<button class="popup_button">修改~</button>
						</view>
					</view>
				</view>
				<view class="popup_overlay" :hidden="userFeedbackHidden" @click="hideDiv()"></view>
	</view> 
</template>

<script>
	export default {
		data() {
			const currentDate = this.getDate({
			            format: true
			        })
			return {
				inputTip: '',
				inputTitle: '',
				userFeedbackHidden: true, // 默认隐藏
				inputValue: '', // 用户反馈内容
				index: 0,
				date: '空',
				areaArray: ['泰山区', '启林北', '启林南', '华山区'],
				user:{
				      nickName:'陈大杰',
				      avatarUrl:'/static/头像2.jpg',
				      sex: 0,
					  date: ['2001', '05', '21'],
					  address: '泰山区',
					  perAddress: '空',
					  introduction: '空'
				    },
				uploadImages: [], 
				isMaxImagesNum :Boolean,
			}
		},
		onLoad(options) {
			const userInfo = wx.getStorageSync('userInfo')
			// const userInfo = JSON.parse(options.userInfo)
			this.user.nickName = userInfo.nickName
			this.user.sex = userInfo.gender - 1
			this.user.avatarUrl = userInfo.avatarUrl
			console.log(this.user)
			console.log("123213")
		},
		  computed: {
		        startDate() {
		            return this.getDate('start');
		        },
		        endDate() {
		            return this.getDate('end');
		        }
		    },
		methods: {
			  bindDateChange: function(e) {
			            this.date = e.target.value
			        },
			 bindPickerChange: function(e) {
			            this.index = e.target.value
			        },
			chooseImageTap() {
				 let _this = this;
				    wx.showActionSheet({
				      itemList: ['从相册中选择', '拍照'],
				      itemColor: "#f7982a",
				      success: function (res) {
				        if (!res.cancel) {
				          if (res.tapIndex == 0) {
				            _this.chooseWxImage('album')
				          } else if (res.tapIndex == 1) {
				            _this.chooseWxImage('camera')
				          }
				        }
				      }
				    })
			},
			  // 选图
			  chooseWxImage: function (type) {
			    var picsItems;
				var _that = this
			    wx.chooseImage({
			      // 相关属性设置
			      count: 1,
			      sizeType: ['original', 'compressed'],
			      sourceType: [type],
			      success: function (res) {
			        var imgsrc = res.tempFilePaths;
			        // concat数组连接，且不会改变现有数组
			        var picss = _that.uploadImages.concat(imgsrc);
			        var imagesArr = '';
			        if (picss.length >= 1) {
						_that.isMaxImagesNum = true
			        } 
			        // 判断选择的数量是否超过设定数量
			        let num = picss.length <= _that.maxImages ? picss.length : _that.maxImages;
			        for (var i = 0; i < num; i++) {
			          imagesArr += '{"imgurl":"' + picss[i] + '"},';
			        }
			        imagesArr = JSON.parse('[' + imagesArr.substring(0, imagesArr.length - 1) + ']');
			        _that.uploadImages = picss
					_that.picsItems = imagesArr
					_that.user.avatorUrl = _that.uploadImages[0]
					_that.uploadImages = []
			      },
			  })
			 },
			 changeSex(sex) {
				 this.user.sex = sex
			 },
			 getDate(type) {
			             const date = new Date();
			             let year = date.getFullYear();
			             let month = date.getMonth() + 1;
			             let day = date.getDate();
			 
			             if (type === 'start') {
			                 year = year - 60;
			             } else if (type === 'end') {
			                 year = year + 2;
			             }
			             month = month > 9 ? month : '0' + month;;
			             day = day > 9 ? day : '0' + day;
			             return `${year}-${month}-${day}`;
			         },
					  showDiv() { // 显示输入弹出框
					 				this.userFeedbackHidden = false;
					 			},
					 			hideDiv() { // 隐藏输入弹出框
					 				this.userFeedbackHidden = true;
					 			},
					 			submitFeedback() { // 提交反馈
					  
					                     var _this =this;
					 				   // 提交反馈内容
									   if(this.inputTitle === '宿舍地址') {
										   console.log('111')
										   this.user.perAddress = this.inputValue
									   } else if(this.inputTitle === '个人简介') {
										   console.log('222')
										   this.user.introduction = this.inputValue
									   } else {
										   this.user.nickName = this.inputValue
									   }
									   this.userFeedbackHidden = true
									   // wx.showToast({
									   // 	title: '修改成功'
									   // })
									   this.inputValue = ''
					 			},
								inputIntro() {
									this.inputTitle = '个人简介'
									this.userFeedbackHidden = false;
									this.inputTip = '介绍一下自己吧~'
								},
								inputAddress() {
									this.inputTip = '例如：泰山区 八栋 520 （会有惊喜哦~）'
									this.inputTitle = '宿舍地址'
									this.userFeedbackHidden = false;
								},
								inputName() {
									this.inputTip = '取一个昵称吧~'
									this.inputTitle = '昵称'
									this.userFeedbackHidden = false;
									
								},
								prev () {
								      this.$router.go(-1)
								    },
									back () {
										   wx.navigateBack({//返回
										      delta: 1
										    })
									}
		}
	}
</script>

<style>
	.editListTop {
		width: 100%;
		display: flex;
		align-items: center;    /**子view垂直居中*/
		vertical-align: center; /**垂直居中*/
		justify-content: center; /**内容居中*/
	}
	.editListTop button {background-color: #7153FF;
	color: white;
	width: 170rpx;
	font-size: 28rpx;
	margin-left: 300rpx;
	font-weight: bold;
	}
	.container {
		left: 0;
		top: 0;
		width: 100%;
	}
	.userImg{
		display: flex;    /*设置显示样式**/
		align-items: center;    /**子view垂直居中*/
		vertical-align: center; /**垂直居中*/
		justify-content: center; /**内容居中*/
	}
	.userImg image{
		width: 210rpx;
		height: 210rpx;
		border-radius: 100%;
		border: 5px solid #7153FF;
	}
	.container-top {
		width: 100%;
		display: flex;
		align-items: center;
		vertical-align: center; /**垂直居中*/
		justify-content: center; /**内容居中*/
		padding-top: 100rpx;
	}
	.cameraImg {
		position: absolute;
		top: 260rpx;
		left: 440rpx;
	}
	.cameraImg image {
		height: 60rpx;
		width: 60rpx;
	}
	.container-mid {
		width: 100%;
		display: flex;
		align-items: center;
		margin: 50rpx;
	}
	.editList {
		justify-content: center;
		width: 100%;
	}
	.editTitle {
		color: #a6bced;
		font-size: 36rpx;
		font-weight: bold;
	}
	.list {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100%;
		justify-content: center;
		margin-top: 40rpx;
	}
	.itemLeft, .itemRight {
		display: flex;
		align-items: center;
	} 
	.listItem {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 85%;
		border-bottom: 1px solid #a6bced;
		padding: 10rpx;
		margin-right: 120rpx;
		font-size: 36rpx;
		color: #3C2B79;
		font-weight: 550;
		margin-bottom: 34rpx;
	}
	.itemTitle {
		width: 300rpx;
		margin-left: 30rpx;
	}
	.sexSection {
		width: 180rpx;
		display: flex;
		border-radius: 20rpx;
		background-color: #f3f1fe;
		justify-content: space-around;
		color: #a6bced;
	}
	.activeSex {
		background-color: #a6bced;
		border-radius: 20rpx;
		padding-left: 20rpx;
		padding-right: 20rpx;
		color: #3C2B79;
	}
	.dateSection {
		width: 300rpx;
		display: flex;
		border-radius: 20rpx;
		background-color: #f3f1fe;
		justify-content: space-around;
		color: #a6bced;
	}
	.activeDate {
		background-color: #a6bced;
		border-radius: 20rpx;
		padding-left: 20rpx;
		padding-right: 20rpx;
		color: #3C2B79;
	}
	.addressText {
		
	}
	.MoreEditTitle {
		margin-top: 50rpx;
		color: #a6bced;
		font-weight: bold;
		margin-bottom: 30rpx;
	}
	.MoreEditTitle .text1 {
		font-size: 36rpx;
	}
	.MoreEditTitle .text2{
		font-size: 28rpx;
	}
	.introductionItem {
		justify-content: space-between;
		align-items: center;
		width: 85%;
		border-bottom: 1px solid #a6bced;
		padding: 10rpx;
		margin-right: 120rpx;
		font-size: 36rpx;
		color: #3C2B79;
		font-weight: 550;
		margin-bottom: 34rpx;
	}
	.introductionItemLeft {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
	}
	.introductionItemTitle{
		
	}
	.popup_overlay {
	 
			position: fixed;
			top: 0%;
			left: 0%;
			width: 100%;
			height: 100%;
			background-color: black;
			z-index: 1001;
			-moz-opacity: 0.8;
			opacity: .80;
			filter: alpha(opacity=88);
		}
	 
		.popup_content {
			position: fixed;
			top: 50%;
			left: 50%;
			width: 520upx;
			height: 550upx;
			margin-left: -270upx;
			margin-top: -270upx;
			border: 10px solid white;
			background-color: white;
			z-index: 1002;
			overflow: auto;
			border-radius: 20upx;
		}
	 
		.popup_title {
			padding-top: 20upx;
			width: 480upx;
			text-align: center;
			font-size: 32upx;
			color: #a6bced;
			margin-left: 30rpx;
		}
	 
		.popup_textarea_item {
			padding-top: 5upx;
			height: 240upx;
			width: 440upx;
			background-color: #ffffff;
			margin-top: 30upx;
			margin-left: 20upx;
			align-items: center;
			justify-content: center;
		}
	 
		.popup_textarea {
			width: 410upx;
			font-size: 26upx; 
			margin-left: 20upx;
		}
	 
		.popup_button {
			margin-left: 30rpx;
			color: white;
			background-color: #7153FF;
			border-radius: 20upx;
		}
		.backPostion {
			left: 30rpx;
			top: 50rpx;
			position: absolute;
		}
</style>
